<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>hanoi</title>
	</head>

	<body>
		<input type="text" value="4" id="input1" /><button onclick="initHanoi()">生成</button>&nbsp;
	</body>
	<script>
		var height = 4;

		var steps = new Array();

		var arrs = [new Array(), new Array(), new Array()];

		var a;

		init();

		var isRunning = false;

		window.onload = function() {
			var bo = document.body;

			a = document.createElement("a");
			a.href = "javascript:;";
			a.onclick = begin;
			a.innerHTML = "汉诺塔";
			bo.insertBefore(a, bo.lastChild);

			var span = document.createElement("span");
			span.innerHTML = "&nbsp";
			bo.insertBefore(span, bo.lastChild);

			var a1 = document.createElement("a");
			a1.href = "javascript:;";
			a1.onclick = function() {
				reset();
				a.onclick = begin;
			};
			a1.innerHTML = "重置";
			bo.insertBefore(a1, bo.lastChild);

			var span2 = document.createElement("span");
			span2.innerHTML = "&nbsp";
			bo.insertBefore(span2, bo.lastChild);

			var tip = document.createElement("span");
			tip.id = "tip1";
			tip.style.color = "green";
			tip.innerHTML = "";
			bo.insertBefore(tip, bo.lastChild);

			var div0 = document.createElement("div");
			div0.id = "div0";
			div0.style.width = "1230px";
			div0.style.height = "400px";
			div0.style.border = "1px solid #c0c0c0";
			div0.style.margin = "10px 0px 0px 0px";
			div0.style.padding = "10px";
			bo.insertBefore(div0, bo.lastChild);
			for(var i = 0; i < 3; i++) {
				var div = document.createElement("div");
				div.id = "div" + (i + 1);
				div.style.width = "400px";
				div.style.height = "400px";
				div.style.border = "1px solid #c0c0c0";
				div.style.float = "left";
				div.style.position = "relative";
				if(i < 2) {
					div.style.marginRight = "10px";
				}
				div0.appendChild(div, div0.lastChild);
			}

			removeHanoi();
			printHanoi();
		}

		function removeHanoi() {
			for(var j = 1; j <= 3; j++) {
				var node = document.getElementById("div" + j);
				var children = node.getElementsByTagName("div");
				for(var i = children.length - 1; i >= 0; i--) {
					node.removeChild(children[i]);
				}
			}
		}

		function printHanoi() {

			for(var j = 1; j <= 3; j++) {
				var node = document.getElementById("div" + j);

				var arr = arrs[j - 1];
				for(var k = 0; k < arr.length; k++) {
					var ele = arr[k];
					var div = document.createElement("div");
					div.id = "hanoi-" + (k + 1) + "" + ele.id;
					div.style.width = ele.width + "px";
					div.style.height = "10px";
					div.style.border = "1px solid #c0c0c0";
					div.style.backgroundColor = "#DCDCDC";
					div.style.margin = "2px auto";
					div.style.position = "absolute";
					div.style.bottom = (15 * (arr.length - k - 1)) + "px";
					div.style.left = ((400 - ele.width) / 2) + "px";
					node.appendChild(div, node.lastChild);
				}
			}
		}

		function doTowers(n, from, inner, to) {
			if(n == 1) {
				steps.push({
					id: 1,
					f: from,
					t: to
				})
			} else {
				doTowers(n - 1, from, to, inner);
				steps.push({
					id: n,
					f: from,
					t: to
				})
				doTowers(n - 1, inner, from, to);
			}
		}

		function begin() {

			isRunning = true;
			document.getElementById("tip1").innerHTML = "Running...";

			doTowers(height, 1, 2, 3);
			a.onclick = function() {};
			removeHanoi();
			printHanoi();

			var i = 0;

			var xx = setInterval(function() {

				var s = steps[i];
				var e = arrs[s.f - 1].shift();
				arrs[s.t - 1].unshift(e);

				removeHanoi();
				printHanoi();

				i++;
				if(i >= steps.length) {
					clearInterval(xx);
					setTimeout(function() {
						isRunning = false;
						document.getElementById("tip1").innerHTML = "Done.";
					}, 1000)
				}
			}, 1000);
		}

		function reset() {

			if(isRunning) {
				return;
			}

			steps = new Array();

			arrs = [new Array(), new Array(), new Array()];

			for(var i = 1; i <= height; i++) {
				arrs[0].push({
					id: i,
					width: (i * 30)
				});
			}

			removeHanoi();
			printHanoi();

			document.getElementById("tip1").innerHTML = "";
		}

		function init() {
			for(var i = 1; i <= height; i++) {
				arrs[0].push({
					id: i,
					width: (i * 30)
				});
			}
		}

		function initHanoi() {
			if(isRunning) {
				return;
			}
			height = Number(document.getElementById("input1").value);
			reset();
		}
	</script>

</html>